<template>
  <div class="tags">
    <el-tag
      v-for="(tag , index) in getNvalist(this.$store.state.historyList) "
      :key="index"
      :closable="true"
      :type="tag.type"
      @close="handleClose(tag)"
      effect="plain"
      @click="go(tag, $event)"
    >
      {{ tag.name }}
    </el-tag>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList:[]
    };
  },

  computed: {
    tags() {
     
    
      return this.$store.state.historyList
    },

  },
created() {
  // 监听页面刷新和关闭
  window.addEventListener('beforeunload', this.beforeunloadFn())
},
deactivated(){
 
},
destroyed() {
 localStorage.clear();
  window.removeEventListener('beforeunload', this.beforeunloadFn())
},
  methods: {
    handleClose(tag) { 
      this.$store.state.historyList.splice(
      this.$store.state.historyList.indexOf(tag),
        1
      );
    },
    go(tag, e) {
      //避免对当前位置的冗余导航 catch((err) => err)
      this.$router.replace(tag.path).catch((err) => err);
      e.target.classList.add("bg");
    }, 
    getNvalist(arr1){
      let arr=[]
 
       arr1.forEach(item=>{
          if(arr.indexOf(item.name)==-1){
            let obj={
              name:item.name,
              path:item.path
            }
               let sta = false
            arr.forEach(res=>{
                if(res.name == item.name){
                   this.$store.state.historyList.splice(
               this.$store.state.historyList.indexOf(item),
                  1
               );
                    sta = true
                   
                }
            })
            if(sta == false){
                arr.push(obj)
            }  
          }
        })
        console.log(arr);
        console.log(this.$store.state.historyList);
      return arr
    },
    beforeunloadFn() {
    console.log('刷新或关闭');
     this.$store.state.historyList=[]
  }
  
  },
  
  
};
</script>

<style scoped>
.el-tag {
  cursor: pointer;
  border-color: #ccc;
  border-radius: 0;
  margin-right: 10px;
  color: #000;
}
.bg {
  background-color: rgba(197, 216, 231, 0.637);
}
.tags {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex;
  align-items: center;
  background-color: #fefefe;
  overflow: auto;
}

::-webkit-scrollbar {
  width: 5px;
  height: 8px;
}
/* //定义滑块 内阴影+圆角 */
::-webkit-scrollbar-thumb {
  border-radius: 1em;
  background-color: #fff;
}
/* //定义滚动条轨道 内阴影+圆角 */
::-webkit-scrollbar-track {
  border-radius: 1em;
  background-color: rgba(17, 17, 17, 0.1);
}
</style>